<template>
	<div>
		<div>使用图标</div>
		<div style="font-size: 20px">
			<!-- 由于SVG图标默认不携带任何属性 -->
			<!-- 你需要直接提供它们 -->
			<Edit style="width: 1em; height: 1em; margin-right: 8px" />
			<Share style="width: 1em; height: 1em; margin-right: 8px" />
			<Delete style="width: 1em; height: 1em; margin-right: 8px" />
			<Search style="width: 1em; height: 1em; margin-right: 8px" />
		</div>
	</div>
	
	<br />
	
	<div>使用表格</div>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="date" label="日期" width="180">
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180">
		</el-table-column>
		<el-table-column prop="address" label="地址">
		</el-table-column>
	</el-table>

	<br />
	
	<div>使用Tab</div>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
		<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
		<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
		<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
	</el-tabs>

	<br />
	
	<div>使用select</div>
	<el-select v-model="value" placeholder="请选择">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
		</el-option>
	</el-select>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}]
			}
		}
	}
</script>

<style>
</style>